<script setup lang="ts">
import { loadAsyncComponent } from '@/utils/components'
import { NodeType, NodeTypeName } from '@/components/LeaferApp/public'

const LeaferApp = loadAsyncComponent(() => import('./components/LeaferApp.vue'))

const activeName = ref('')
/**
 * 开始拖拽
 * @param e
 */
const dragstart = (e: DragEvent) => {
  if (!e.target) {
    return
  }
  const type = (e.target as HTMLHtmlElement).dataset.type
  if (!type) {
    return
  }
  console.log('拖拽数据', type)
  // 把当前的类型设置到 dataTransfer
  e.dataTransfer?.setData('text/plain', type)
}

/**
 * 按钮列表
 */
const btnList = Object.keys(NodeType).map((item) => {
  return {
    value: NodeType[item] as string,
    label: NodeTypeName[item] as string,
  }
})

// 是否显示帮助提示
const showHelp = ref(false)

// 是否显示按钮
const showBtns = ref(true)

// 是否属性面板
const showPanel = ref(true)
// 编辑表单id
const editId = 'edit-' + new Date().getTime()

const leaferAppRef = useTemplateRef<typeof LeaferApp>('LeaferAppRef')
const fit = () => {
  leaferAppRef.value?.fit()
}
</script>

<template>
  <el-container class="leafer-container">
    <el-header>
      <el-button text type="primary" @click="showHelp = true">操作提示</el-button>
      <el-button text type="primary" @click="showBtns = !showBtns">切换工具栏</el-button>
      <el-button text type="primary" @click="showPanel = !showPanel">切换属性面板</el-button>
      <el-button text type="primary" @click="fit">显示适合大小</el-button>
    </el-header>
    <el-container>
      <Transition
        appear
        enter-active-class="animate__animated animate__bounceInLeft"
        leave-active-class="animate__animated animate__bounceOutLeft"
      >
        <el-aside width="200px" @dragstart="dragstart" v-if="showBtns">
          <el-card shadow="hover" style="height: 100%">
            <template #header>
              <div class="card-header">
                <span>工具栏</span>
              </div>
            </template>
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item title="图形元素" name="1">
                <div class="leafer-btn-list">
                  <el-button
                    type="primary"
                    draggable="true"
                    text
                    bg
                    v-for="item in btnList"
                    :key="item.value"
                    :data-type="item.value"
                  >
                    {{ item.label }}
                  </el-button>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </el-aside>
      </Transition>
      <el-main ref="homeView" style="padding: 0">
        <!--        创建 LeaferApp-->
        <LeaferApp editor rule :editId="editId" :showEditForm="showPanel" ref="LeaferAppRef">
        </LeaferApp>
      </el-main>
      <Transition
        appear
        enter-active-class="animate__animated animate__bounceInRight"
        leave-active-class="animate__animated animate__bounceOutRight"
      >
        <el-aside width="300px" v-show="showPanel">
          <el-card shadow="hover" style="height: 100%">
            <template #header>
              <div class="card-header">
                <span>属性栏</span>
              </div>
            </template>
            <div :id="editId"></div>
          </el-card>
        </el-aside>
      </Transition>
    </el-container>
    <el-dialog v-model="showHelp" title="操作提示">
      <el-alert
        title="鼠标"
        description="滚轮（纵向滚动），Shift + 滚轮（横向滚动），鼠标中键 / 空格键 + 拖拽 (自由移动)。"
        type="success"
        :closable="false"
      />
      <el-divider />
      <el-alert
        title="快捷键"
        description="按住Ctrl / Command 键：
将光标移动至四条边上，拖动可倾斜元素。
将光标移动至控制点上，拖动可旋转元素。
按住 Alt 键 ：中心缩放 / 倾斜 （Alt + Shift 键可组合）。
按住 Shift 键：多选 / 固定比例缩放 / 固定方向移动 / 以对角为中心旋转。"
        type="success"
        :closable="false"
      />

      <el-divider />
      <el-alert
        title="方向建"
        description="↑ 向向移动1个像素; → 向右移动一个像素; ↓ 向下移动一个像素; ← 向左移动一个像素"
        type="success"
        :closable="false"
      />
    </el-dialog>
  </el-container>
</template>

<style lang="scss" scoped>
.leafer-container {
  height: 100%;
  overflow: hidden;

  .leafer-btn-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    .el-button {
      margin-left: 0px;
    }
  }
}
</style>
